<template>
    <div class="hello" >
        <div ref="chart" class="line-chart"></div>
    </div>
</template>

<script>
    import { merge ,throttle} from "lodash"
    // 引入 ECharts 主模块
    let echarts = require('echarts/lib/echarts');
    // 引入柱状图
    // require('echarts/lib/chart/pie');
    require('echarts/lib/chart/bar');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');

    export default {
        name: 'barcharts',
        data(){
            return {
                getDefaultOptions: {
                  color: ['#3398DB'],
                  tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis : [
                    {
                      type : 'category',
                      data : [],
                      axisTick: {
                        alignWithLabel: true
                      }
                    }
                  ],
                  yAxis : [
                    {
                      type : 'value'
                    }
                  ],
                  series : [
                    {
                      name:'直接访问',
                      type:'bar',
                      barWidth: '60%',
                      data:[]
                    }
                  ]
                }
            }
        },
        props:['chartData'],
        methods: {
            updateDimensions(){
                this.chart.resize();
            },
            setOption(option) {
                // 绘制图表
                option = merge({}, this.getDefaultOptions, option);

                this.chart.setOption(option);
            },
            readyRenderLineChart(){
                let chartData=this.$props.chartData;
                let categorys=[],data=[];
                chartData.forEach((obj,index)=>{
                    categorys.push(obj.month)
                    data.push(obj.value)
                });
                this.setOption({
                    xAxis:[{
                      data:categorys
                    }],
                    series: [{
                        data:data
                    }]
                })
            },
        },
        mounted: function () {
            this.chart = echarts.init(this.$refs.chart)
            window.addEventListener("resize", throttle(this.updateDimensions));
            this.readyRenderLineChart()
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
   .line-chart{
       width:100%;
       height:300px;
       margin-top: 50px;
   }
</style>
